import React from 'react';
import { connect } from 'dva';
import PropTypes from 'prop-types'
import {color} from '../../utils/theme'
import { Row, Col, Card } from 'antd'
import CountUp from 'react-countup';
import styles from './index.less';
import numArray from './test'
import { NumberCard, Sales, Weather, Quote, RecentSales,  }  from './components'

const bodyStyle = {
  bodyStyle: {
    height: 432,
    background: '#fff',
  },
}

function Index({home}) {
    // console.log('===home===',home);
    const { numbers,sales, weather, quote, recentSales } = home;
    // const num = numArray;
    // console.log('===recentSales===',recentSales);
    const numberCards = numbers.map((item, key) => <Col key={key} lg={6} md={12}>
      <NumberCard {...item} />
    </Col>)

  return (
  <Row  >
    {numberCards}
    <Col lg={18} md={24}>
      <Card bordered={false} bodyStyle={{
        padding: '24px 36px 24px 0',
      }}>
        <Sales data = {sales} />
      </Card>
    </Col>

    <Col lg={6} md={24}>
      <Row gutter={24}>
        <Col lg={24} md={12}>
          <Card bordered={true} className={styles.weather} bodyStyle={{
            padding: 0,
            height: 204,
            background: color.yellow,
          }}>
            <Weather {...weather} />
          </Card>
        </Col>
        <Col lg={24} md={12}>
          <Card bordered={true} className={styles.quote} bodyStyle={{
            padding: 0,
            height: 204,
            background: color.peach,
          }}>
            <Quote {...quote} />
          </Card>
        </Col>
      </Row>
    </Col>
    <Col lg={12} md={24}>
      <Card bordered={true} {...bodyStyle}>
        <RecentSales data={recentSales}/>
      </Card>
    </Col>
    <Col lg={12} md={24}>
      <Card bordered={true} {...bodyStyle}>
        asdasdasd
      </Card>
    </Col>
  </Row>
  );
}

Index.propTypes = {
   home: PropTypes.object
};

export default connect(({ home }) => ({ home }))(Index)
